import { App, ConfigProvider } from 'antd'
import type { PropsWithChildren } from 'react'
import { useLayoutEffect } from 'react'
import { ThemeProvider } from 'styled-components'

import { antdConfig, themeToken } from './init'

export default function MainThemeProvider({ children }: PropsWithChildren) {
  useLayoutEffect(() => {
    ConfigProvider.config({
      holderRender: (dom) => (
        <ConfigProvider
          prefixCls="static"
          iconPrefixCls="icon"
          theme={antdConfig}
          warning={{ strict: false }}
        >
          <App
            notification={{
              stack: { threshold: 1 },
              placement: 'top',
              top: 35,
            }}
          >
            {dom}
          </App>
        </ConfigProvider>
      ),
    })
  })

  return (
    <ConfigProvider
      theme={{
        token: themeToken,
        ...antdConfig,
      }}
    >
      {children}
    </ConfigProvider>
  )
}

export { antdConfig, themeToken }
